<template>
  <div class="user-add" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix updt">
        <el-page-header @back="$router.go(-1)">
        </el-page-header>
      </div>
      <div class="form-database-form">
        <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
          <div class="form-left">
            <el-form-item label="头像：" prop="avatar">
              <e-upload-image v-model="form.avatar"></e-upload-image>
            </el-form-item>
          </div>
          <div class="form-right">
            <el-form-item label="用户名：" prop="username" required :rules="[{ required: true, message: '请填写用户名' }]">
              <el-input placeholder="输入用户名" style="width:250px;" v-model="form.username" />
            </el-form-item>

            <el-form-item label="姓名：" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
              <el-input placeholder="输入姓名" style="width:250px;" v-model="form.name" />
            </el-form-item>

            <el-form-item label="性别：" prop="sex">
              <el-select v-model="form.sex">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="手机：" prop="telephone" :rules="[{ validator: rule.checkPhone, message: '请输入正确手机号码' }]">
              <el-input placeholder="输入手机" style="width:250px;" v-model="form.telephone" /> </el-form-item>


            <el-form-item label="邮箱：" prop="email" :rules="[{ type: 'email', message: '请输入正确邮箱地址' }]">
              <el-input placeholder="输入邮箱" style="width:250px;" v-model="form.email" />
            </el-form-item>

            <el-form-item label="身份证：" prop="identification"
              :rules="[{ validator: rule.checkCard, message: '请输入有效身份证号码' }]">
              <el-input placeholder="输入身份证" style="width:250px;" v-model="form.identification" />
            </el-form-item>


          </div>
          <el-form-item v-if="btnText">
            <el-button type="primary" @click="submit"
              style="margin-left: 391px; letter-spacing: 2px; font-size: 16px; font-weight: bold;">
              {{ btnText }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<style type="text/scss" scoped lang="scss">
.user-add {
  .form-database-form {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    /* 可选：添加内边距 */

    ::v-deep .el-form-item__label {
      font-weight: bold;
      font-size: 17px;
    }

    ::v-deep .el-select>.el-input {
      width: 250px;
    }


  }

  .form-left {
    width: 21%;
    margin-top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .form-right {
    margin-left: 322px;
    margin-top: -360px;

    ::v-deep .el-form-item {
      margin: 0;
    }
  }

  ::v-deep .avatar-uploader .el-upload .el-upload-dragger {
    width: 200px;
    height: 200px;


    .el-icon-plus.avatar-uploader-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .avatar-uploader .el-upload .el-upload-dragger {
    width: 200px;
    height: 200px;
  }

  ::v-deep .avatar-uploader .el-upload .el-upload-dragger .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
}
::v-deep .el-button--primary {
    color: #FFFFFF;
    background-color: #7fabbe;
    border-color: #7fabbe;
}
</style>
<script>
import api from '@/api'
import rule from '@/utils/rule'
import { extend } from '@/utils/extend'


export default {
  name: 'user-add',
  data() {
    return {
      rule,
      loading: false,
      form: {
        username: '',
        name: '',
        sex: '',
        telephone: '',
        email: '',
        identification: '',
        avatar: '',


      },


    }
  },
  watch: {
    id: {
      handler() {
        this.loadInfo();
      }
    }
  },
  props: {
    isRead: {
      type: Boolean,
      default: true
    },
    btnText: {
      type: String,
      default: '提交'
    },
    id: {
      type: [String, Number],
      required: true
    },
  },

  computed: {},
  methods: {
    submit() {
      this.$refs.formModel.validate().then(res => {
        if (this.loading) return;
        this.loading = true;
        var form = this.form;

        this.$post(api.user.update, form).then(res => {
          this.loading = false;
          if (res.code == api.code.OK) {
            this.$message.success('添加成功');
            this.$emit('success', res.data);
            this.$refs.formModel.resetFields();
            this.loadInfo();
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        })

      }).catch(err => {
        console.log(err.message);
      })

    },
    loadInfo() {

      // 更新数据,获取数据
      this.loading = true;
      var form = this.form;
      this.$post(api.user.edit, {
        id: this.id
      }).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
          this.form = res.data.mmm;

        } else {
          this.$message.error(res.msg);
          this.$router.go(-1);
        }
      }).catch(err => {
        this.$message.error(err.message);
        this.$router.go(-1);
      });
    },
  },
  created() {
    this.loadInfo();
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>
